<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<ul>
			<li>1</li>
			<li>22</li>
			<li>333</li>
			<li>44444</li>
			<li>555555</li>
			<li>666</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
	</body>
	<script>
		//迭代器
		var Iterator = function(items, container) {
			//获取父容器，若container参 数存在,并且可以获取该元素则获取， 否则获取document
			var container = container && document.getElementById(container) || document,
				//获取元素
				items = container.getElementsByTagName(items),
				//获取元素长度
				length = items.length,
				//当前索引值，默认: 0
				index = 0;
			//缓存源生数组splice方法
			var splice = [].splice;
			return {
				//获取第一个元素
				first: function() {},
				//获取最后一个元素
				second: function() {},
				//获取前一个元素
				pre: function() {},
				//获取后一个元素
				next: function() {},
				//获取某一个元素
				get: function() {},
				//对每一个元素执行某一 个方法
				dealEach: function() {},
				//对某一个元素执行某一个方法
				dealltem: function() {},
				//排他方式处理某一个元素
				exclusive: function() {}
			}
		}
		//逐步实现
		//获取第一个元素

		var Iterator = function(items, container) {
			//获取父容器，若container参 数存在,并且可以获取该元素则获取， 否则获取document
			var container = container && document.getElementById(container) || document,
				//获取元素
				items = container.getElementsByTagName(items),
				//获取元素长度
				length = items.length,
				//当前索引值，默认: 0
				index = 0;
			//缓存源生数组splice方法
			var splice = [].splice;
			return {
				//获取第一个元素
				first: function() {
					return items[0]
				},
				//获取最后一个元素
				second: function() {
					return items[items.length - 1];
				},
				//获取前一个元素
				pre: function() {
					if(--index > 0) { //如果索引值大于0
						return items[index]; //获取索引值对应的元素
					} else {
						index = 0; //索引值为0
						return null; //返回空
					}
				},
				//获取后一个元素
				next: function() {
					if(++index < length) { // 如果索引值小于长度
						return items[index]; // 获取索引|值对应的元素
					} else {
						index = length - 1; // 索引值为length- 1
						return null; //返回空
					}
				},
				//获取某一个元素
				get: function(num) {
					//如果num大于等于0再获取正向获取，否则逆向获取
					index = num >= 0 ? num % length : num % length + length;
					//返回对应元素
					return items[index];
				},
				//对每一个元素执行某一 个方法
				dealEach: function(fn) {
					//第二个参数开始为回调函数中参数
					var args = splice.call(arguments, 1);
					//遍历元素
					for(var i = 0; i < length; i++) {
						//对元素执行回调函数
						fn.apply(items[i], args);
					}
				},
				//对某一个元素执行某一个方法
				dealItem: function(num, fn) {
					//对元素执行回调函数，注: 1 第三个参数开始为回调函数中参数2通过thiss.get方法设置index索引值
					fn.apply(this.get(num), splice.call(arguments, 2))
				},
				//排他方式处理某一个元素
				exclusive: function(num, allFn, numFn) {
					//对所有元素执行回调函数
					this.dealEach(allFn);
					//如果num类型为数组
					if(Object.prototype.toString.call(num) === '[object Array]') {
						//遍历num数组
						for(var i = 0, len = num.length; i < len; i++) {
							//分别处理数组中每一个元素
							this.dealItem(num[i], numFn);
						}
					} else {
						//处理第num个元素
						this.dealItem(num, numFn);
					}
				}
			}
		}

		var demo = new Iterator('li', 'container');
		//然后如果我们想为每一个元素处理一些逻辑我们就可以这样:
		console.log(demo.first()); // <li>1</li>
		console.log(demo.pre()); // null
		console.log(demo.next()); // <li>2</li>
		console.log(demo.get(2000)); // <li>1</i>
		//处理所有元素
		demo.dealEach(function(text, color) {
			this.innerHTML = text;
			//设置内容
			this.style.background = color; //设置背景色
		}, 'test', 'pink');
		//排他思想处理第3个与第4个元素
		demo.exclusive([2, 3], function() {
			this.innerHTML = '被排除的';
			this.style.background = 'green';
		}, function() {
			this.innerHTML = '选中的 ';
			this.style.background = 'red';
		})
	</script>

</html>